<!--/**
*注册1 *
*
* @author LWG
* @date 2022/7/19 15:12
* @since 1.0.0
*/-->
<template>
  <div>
    <div class="top">
      <!-- 顶部背景图片 -->
      <div class="bgImg">
      </div>
      <!-- logo图片 -->
      <div class="logo">
        <img class="logo_img" src="../../../assets/logo.png" />
      </div>
      <div class="empty" >

      </div>
      <van-nav-bar
          title="时光源注册"
      />
      <van-form @submit="onSubmit">
        <van-field
            v-model="nick"
            name="nick"
            label="nick"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
            v-model="address"
            type="address"
            name="address"
            label="地址"
            placeholder="地址"
            :rules="[{ required: true, message: '请填写地址' }]"
        />
        <van-field
            v-model="School"
            type="School"
            name="School"
            label="学校"
            placeholder="学校"
            :rules="[{ required: true, message: '填写学校' }]"
        />
        <van-field
            v-model="sex"
            type="sex"
            name="sex"
            label="性别"
            placeholder="性别"
            :rules="[{ required: true, message: '请选择性别' }]"
        />
        <van-field
            v-model="age"
            type="age"
            name="age"
            label="年龄"
            placeholder="年龄"
            :rules="[{ required: false, message: '请输入年龄' }]"
        />
        <van-field

            type="birthday"
            name="birthday"
            :value="birthday"
            @click="show = true"
            label="生日"
            placeholder="生日"
            :rules="[{ required: false, message: '请输入生日' }]"
        />

        <!--        <van-cell title="生日" " />-->
        <van-datetime-picker
            v-if="show==true"
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
        />

        <van-field
            v-model="introduction"
            type="introduction"
            name="introduction"
            label="个性签名"
            placeholder="个性签名"
        />
        <van-row gutter="24" style="margin-top: 30px">
          <van-col span="8"></van-col>
          <van-col span="8">
            <van-button round block plain hairline
                        color="black"
                        size="small"
                        native-type="submit"
                        @click="detail"
            >注册</van-button>
          </van-col>
          <van-col span="8"></van-col>
        </van-row>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'Registry0',
  data() {
    return {
      userId: null,
      address: '',
      School: '',
      sex: '',
      age: '',
      introduction: '',
      nick: '',
      birthday: '',
      show: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2030, 11, 31),
      currentDate: new Date(),
    }
  },
  created() {
    this.userId = this.$route.query.userId
    console.log(this.userId)
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      history.go(-1)
    },

    onConfirm(birthday) {
      this.show = false;
      this.birthday = this.$d(birthday).format("YYYY-MM-DD");
    },
    detail() {
      const url = 'http://localhost:10002/ums/userDetail/add-new'
      const dat = {
        userId: this.userId,
        address: this.address,
        gender: this.sex,
        introduction: this.introduction,
        nickname: this.nick,
        school: this.school,
        birthday: this.birthday,
      }
      this.axios.post(url,dat).then(response =>{
        console.log(dat)
        if(response.data.state==200){
          console.log(response.data)
          Toast("注册成功")
          this.$router.push('/login')
        }
        else {
          console.log('注册失败')
          Toast(response.data.message)
        }
      })
    }
  },
};
</script>

<style>
.bgImg {
  width: 100vw;
  height: 30vh;
  z-index: 1;
  background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
  background-size: 100%;
}
.logo {
  position: absolute;
  width: 40vw;
  height: 15vh;
  top: 20vh;
  left: 30vw;
  background-color: #ffffff;
  border-radius: 60%;
  z-index: 2;
}
.logo_img {
  width: 150%;
  height: 150%;
  margin-left: -10vw;
  margin-top: -5vh;
}
.empty {
  height: 5vh;
}
</style>

